<template>
  <div class="wrapper">
    <div class="editName">
      <div class="header">
      <span class="return" @click="back()">取消</span>邀请好友列表<span class="send" @click="save()">完成</span>
      </div>
      <div class="setNameLine"></div>
      <ul>
        <li v-show="friendList.length > 0" v-for="item in friendList" class="friendItem">
          <span  class="circle" @click="toggleFriend($event, item)" :class="{'circleActive': defaultSelected(item)}"></span>
          <img class="friendImg" :onerror="defaultImg" :src="item.Tag_Profile_IM_Image" alt="">
          <div class="friendName">{{defaultName(item)}}<div class="friendNameLine"></div></div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import Client from "../../assets/js/common";
import { checkStatus } from "../../assets/js/login";
import { Toast } from "mint-ui";
import { Popup } from "mint-ui";
import { Actionsheet } from "mint-ui";
import { MessageBox } from "mint-ui";
import Chat from "../../assets/js/chat";
export default {
  data() {
    return {
      defaultImg: Client.defaultImg,
      friendList: [],
      changeData: {
        groupMembers: [] // 正在修改的邀请好友列表
      }
    };
  },
  created() {
    // 登录
    checkStatus(loginInfo => {
      Chat.getAllFriend(loginInfo.identifier).then(resp => {
        if(Client.getStore("createGroupInfo").groupMembers.length) {
          this.changeData.groupMembers = Client.getStore("createGroupInfo").groupMembers;
        }
        this.getAll(resp);
      });
      this.loginInfo = loginInfo;
      if (
        Client.getStore("friendList") &&
        Client.getStore("friendList").length > 0
      ) {
        this.friendList = Client.getStore("friendList");
      }
    });
  },
  methods: {
    back() {
      history.back();
    },

    //获取全部好友
    getAll(resp) {
      if(resp == null) return;
      for (let i = 0; i < resp.InfoItem.length; i++) {
        if (resp.InfoItem[i].SnsProfileItem) {
          let sns = resp.InfoItem[i].SnsProfileItem;
          sns.forEach((ele, index) => {
            resp.InfoItem[i][ele.Tag] = ele.Value;
          });
          //清空原来的resp.InfoItem[i].SnsProfileItem = '';
        }
      }

      this.friendList = resp.InfoItem;
      Client.log(this.friendList);
      let friends = resp.InfoItem;
      //存储好友列表
      Client.setStore("friendList", friends);
    },

    // 选择需要邀请的好友
    toggleFriend(event, item) {
      if (event.target.getAttribute("class").indexOf("circleActive") < 0) {
        let friend = {};
        friend.friendId = item.Info_Account;
        friend.friendUrl = item.Tag_Profile_IM_Image;
        this.changeData.groupMembers.push(friend);
        event.target.classList.add("circleActive");
      } else {
        if (this.changeData.groupMembers.length) {
          let newArr = [];
          for (let i = 0; i < this.changeData.groupMembers.length; i++) {
            if (
              this.changeData.groupMembers[i]["friendId"] != item.Info_Account
            ) {
              newArr.push(this.changeData.groupMembers[i]);
            }
          }
          this.changeData.groupMembers = newArr;
        }
        event.target.classList.remove("circleActive");
      }
    },

    // 确定选中的好友
    save() {
      this.changeStorage(
        "createGroupInfo",
        "groupMembers",
        this.changeData.groupMembers,
        null
      );
      this.$router.push({ path: "/createGroup" });
    },

    changeStorage(storeName, field, changeData, save) {
      let createData = Client.getStore(storeName);
      if (!createData) return;
      createData[field] = changeData;
      Client.setStore(storeName, createData);
      if (save) {
        save = Client.getStore(storeName);
      }
    },

    //设置默认名称
    defaultName(dataInfo) {
      if (dataInfo.Tag_Profile_IM_Nick) {
        return dataInfo.Tag_Profile_IM_Nick;
      } else {
        return dataInfo.Info_Account;
      }
    },

    // 设置默认选中
    defaultSelected(item) {
      let selectedFriendList = Client.getStore("createGroupInfo").groupMembers;
      for (let i = 0; i < selectedFriendList.length; i++) {
        let selectedFid = selectedFriendList[i].friendId;
        if (selectedFid == item.Info_Account) {
          return true;
        }
      }
      return false;
    }
  }
};
</script>

<style lang="less" scoped>
.editName {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  .setNameLine {
    height: 0.21rem;
  }
  .input {
    width: 100%;
    height: 0.5rem;
    text-indent: 0.15rem;
    background-color: white;
    color: #4a4a4a;
    font-size: 0.14rem;
    outline: none;
    font-weight: 400;
    border: none;
  }
}
.wrapper {
  .header {
    width: 3.75rem;
    height: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 0.16rem;
    border-bottom: 1px solid #f4f4f4;
    background-color: white !important;
    .return {
      color: #4a4a4a;
      font-size: 0.16rem;
      position: absolute;
      left: 0.15rem;
    }
    .send {
      color: #4a4a4a;
      font-size: 0.16rem;
      position: absolute;
      right: 0.15rem;
    }
  }
  .friendItem {
    height: 0.6rem;
    display: flex;
    align-items: center;
    background-color: white;
    padding: 0 0.15rem;
    .circle {
      width: 0.2rem;
      height: 0.2rem;
      background-image: url("../../assets/img/icon_unsekected@3x.png");
      background-size: 100%;
      background-repeat: no-repeat;
      margin-right: 0.15rem;
    }
    .circleActive {
      background-image: url("../../assets/img/icon_designate01@3x.png");
    }
    .defaultActive {
      background-image: url("../../assets/img/icon_selected01@3x.png") !important;
    }
    .friendImg {
      width: 0.4rem;
      height: 0.4rem;
      border-radius: 50%;
    }
    .friendName {
      display: flex;
      flex: 1;
      height: 0.6rem;
      line-height: 0.6rem;
      position: relative;
      font-size: 0.16rem;
      text-indent: 0.06rem;
      .friendNameLine {
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        height: 1px;
        background-color: #e1e1e1;
      }
    }
  }
}
</style>


